<template>
    <div class="home-wrap" @click.stop="hideHistoryPanel">

        <div class="home-body">
            <Nav></Nav>
            <Logo :tip="false"></Logo>
            <Search></Search>
            <Quick></Quick>
            <Foot></Foot>
        </div>

        <Bookmark></Bookmark>
    </div>
</template>

<script>

    import {useStore} from "vuex";

    import Nav from '../default/Nav.vue';
    import Logo from '../default/Logo.vue';
    import Search from '../default/Search.vue';
    import Quick from '../default/Quick.vue';
    import Foot from "../default/Foot.vue";
    import Bookmark from "./Bookmark.vue";

    export default {
        components: {
            Nav,
            Logo,
            Search,
            Quick,
            Bookmark,
            Foot,
        },
        // 数据
        data() {
            return {
                store: useStore().state,
            }
        },
        // DOM未渲染前调用
        created() {

        },
        // DOM渲染后调用
        mounted() {

        },
        // 方法
        methods: {
            // 关闭历史记录面板(设置default主题的历史面板隐藏)
            hideHistoryPanel() {
                let that = this,
                    skin = that.store.skin;
                skin.default.history.state = false;
                that.$store.commit('setSkin', skin);
            },
        },
    }
</script>

<style lang="less" scoped>
    @width: 1000px;

    .home-wrap {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;

        .home-body {
            width: @width;
            margin: 0 auto;
        }
    }

    @media screen and (max-width: @width + 40) {
        .default-wrap .main-wrap {
            width: auto;
            overflow: hidden;
            margin: 0;
            padding: 0 20px 20px 20px;
        }
    }
</style>
